import { h, Component } from 'preact';
import classNames from 'classnames';
import { mergeClassName } from '../utils/util.obj';
import Icon from '../Icon';

const sizes ={
	large: 'btn-lg',
	default: '',
	small: 'btn-sm',
	smaller: 'btn-xs'
};

class Button extends Component {
	constructor(props) {
		super(props);
		this.state = {

		};
	}

	componentDidMount() {

	}

	render({ children,type,tag: Tag, className, size, icon, ...other },state) {
		return <Tag {...other} className={mergeClassName(className,classNames('btn btn-'+type,{ [`${sizes[size]}`]: !!sizes[size] }))}><Icon type={icon} />&nbsp;{children}</Tag>;
	}
}


Button.Group = ({ children,className,layout,size }) => {
	if (!Array.isArray(children)){
		return children;
	}

	return (
		<div class={mergeClassName('btn-group',className,{[`btn-group-${layout}`]:!!layout})} role="group">
			{
				children.map(btn => {
					const newProps = { ...btn.props };
					if (size != null){
						newProps.size = size;
					}
					return <Button {...newProps} />;
				})
			}
		</div>
	);
};

Button.Group.displayName = 'Group';


Button.propTypes = {

};

Button.defaultProps = {
	type: 'default',
	size: 'default',
	tag: 'a'
};

export default Button;
